import React, { Suspense, useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch, Redirect, useHistory} from 'react-router-dom';

import '@stylesheets/index.less'
import config from '@routes/config';

import { LoadingIcon } from "@common/LoadingPage";


export const renderRoutes = routes => {
    if (!Array.isArray(routes)) {
        return null;
    }

    return (
        <Suspense fallback={<LoadingIcon />}>
            <Switch>
                {routes.map((route, index) => {
                    if (route.redirect) {
                        return (
                            <Redirect
                                key={route.path || index}
                                exact={route.exact}
                                strict={route.strict}
                                from={route.path}
                                to={route.redirect}
                            />
                        );
                    }

                    return (
                        <Route
                            key={route.path || index}
                            path={route.path}
                            exact={route.exact}
                            strict={route.strict}
                            render={() => {
                                const renderChildRoutes = renderRoutes(route.childRoutes);
                                if (route.component) {
                                    return (
                                        <route.component route={route}>{renderChildRoutes}</route.component>
                                    );
                                }
                                return renderChildRoutes;
                            }}
                        />
                    );
                })}
            </Switch>
        </Suspense>
    );
};

const routers = renderRoutes(config)

const AppRouter = () => (
    <Router>
        {routers}
        <HistoryListener />
    </Router>
);

let historyList = []

const HistoryListener = () => {
    const history = useHistory()
    useEffect(() => {
        historyList.push(history.location.pathname)
        history._goBack = history.goBack
        history.goBack = function (url = -1) {
            if (typeof(url) === 'number') {
                history._goBack(url)
            } else {
                if (Array.isArray(url)) {
                    if (historyList.length > 1 && url.includes(historyList[historyList.length - 2])) {
                        history._goBack()
                    } else {
                        history.push(url[0])
                    }
                } else {
                    if (historyList.length > 1 && url === historyList[historyList.length - 2]) {
                        history._goBack()
                    } else {
                        history.push(url)
                    }
                }
            }
        }
        let unListen = history.listen((route, type) => {
            console.log('history change', route )
            switch (type) {
                case 'PUSH':
                    historyList = [
                        ...historyList,
                        route.pathname
                    ]
                    break
                case 'REPLACE':
                    historyList = [
                        ...historyList.slice(0, -1),
                        route.pathname
                    ]
                    break
                case 'POP':
                    historyList = [
                        ...historyList.slice(0, -1),
                    ]
                    break;
                default:
                    break;
            }
        })
        return () => unListen && unListen()
    }, [])
    return null
}

export default AppRouter;
